<template>
    <div class="box">
        <div class="search">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="">
                    <el-input v-model="formInline.num" placeholder="请输入售后编号" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input v-model="formInline.id" placeholder="请输入订单ID" size="mini"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit" size="mini">查找</el-button>
                    <el-button type="primary" @click="load" size="mini">导出</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-row style="text-align: right;">
            <el-button type="success" size="mini">批量通过</el-button>
            <el-button type="danger" size="mini">批量拒绝</el-button>
        </el-row>
        <div class="table">
            <template>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="全部" name="first">
                        <template>
                            <el-table :data="tableData" style="width: 100%">
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column label="售后编号" width="136">
                                    <template slot-scope="scope">

                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="订单ID" width="136">
                                    <template slot-scope="scope">

                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="用户ID" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="售后类型" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="退款原因" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="退款价格" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="申请时间" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                        <el-button size="mini" type="danger"
                                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="待审核" name="second">
                        <template>
                            <el-table :data="tableData" style="width: 100%">
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column label="售后编号" width="136">
                                    <template slot-scope="scope">

                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="订单ID" width="136">
                                    <template slot-scope="scope">

                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="用户ID" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="售后类型" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="退款原因" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="退款价格" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="申请时间" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                        <el-button size="mini" type="danger"
                                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="待退款" name="third">
                        <template>
                            <el-table :data="tableData" style="width: 100%">
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column label="售后编号" width="136">
                                    <template slot-scope="scope">

                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="订单ID" width="136">
                                    <template slot-scope="scope">

                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="用户ID" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="售后类型" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="退款原因" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="退款价格" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="申请时间" width="136">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                        <el-button size="mini" type="danger"
                                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-tab-pane>

                </el-tabs>
            </template>
        </div>
    </div>
</template>

<script>
import { yonghu } from '@/api/shangchangguanli/shgl.js';
export default {
    name: 'VueCliAftersale',

    data() {
        return {
            formInline: {
                num: '',
                id: ''
            },
            activeName: 'first',
            tableData: []
        };
    },

    mounted() {
        this.show()
    },

    methods: {
        show(){
            yonghu({
                page: 1,
                limit: 20,
                status:'' ,
                sort: 'add_time',
                order: 'desc'
            }).then((res)=>{
                console.log(res);
                this.tableData=res.data.data
                
            })
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
        },
        onSubmit() {

        },
        load() {

        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },
};
</script>
<style scoped>
.box {
    padding: 10px;
}
</style>